<template>
	<view style="background-size: 100% 100%;height: 100%;overflow-y: auto;" :style="{ backgroundImage: `url(${img2})` }">
		<navbar @height="navheight"></navbar>
		<view :style="{ height: zanheight + 'px' }"></view>
		<view class="header-wrapper" v-if="form">
			<view class="header-content" style="background: url('../../static/home/header-bg.png');background-size: 100% 100%;height: 100%;">
				<view class="left">
					<view class="">我们在一起</view>
					<view class="" @click="all('/pages/jinianri/jinianri')">
						<text>{{ form.anniversary_date }}</text>
						天
					</view>
					<view class="btn" @click="shows = true">真爱奖励</view>
				</view>
				<view class="right">
					<image :src="form.my_avatar" mode=""></image>
					<image :src="form.ta_avatar" mode=""></image>
				</view>
			</view>
			<view class="header-share"><image @click="yaoqing" src="../../static/home/share.png" mode=""></image></view>
		</view>
		<!-- <view v-if="form" class="flex box a-t">
			<view class="w33 flex" style="overflow: hidden;text-align: center;">
				<view>
					<image :src="form.my_avatar" style="width: 55px;border-radius: 50%; border: #fff solid 2px ; box-sizing: border-box;height: 55px; " mode=""></image>
					<view class="f12 cf" style="text-align: center;">{{ form.my_nickname }}</view>
					<view class="f12 cf" style="text-align: center;">{{ form.word_one }}Ta{{ MyCount.my_sign_count || 0 }}天</view>
				</view>
			</view>
			<view style="text-align: center;" class="j-t w33">
				<view class="f16 fb cf" @click="shows = true">{{ form.space_name }}</view>
				<view class="f14 cf" @click="all('/pages/jinianri/jinianri')">
					{{ form.anniversary_name }}
					<view>
						<text class="bg fb" style="font-size: 26px;">{{ form.anniversary_date }}</text>
						天
						<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/bianji.png" style="width: 14px; margin-left: 6px; " mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="w33 flex" style="overflow: hidden;margin-left: auto;text-align: center; ">
				<view style="margin-left: auto;">
					<image :src="form.ta_avatar" style="width: 55px;border-radius: 50%; border: #fff solid 2px ; box-sizing: border-box;height: 55px; " mode=""></image>
					<view class="f12 cf" style="text-align: center;">{{ form.ta_nickname }}</view>
					<view class="f12 cf" style="text-align: center;">{{ form.word_one }}我{{ MyCount.ta_sign_count || 0 }}天</view>
				</view>
			</view>
		</view> -->
		<view @click="yaoqing" v-else style="text-align: center;color: #fff;width: 240px;margin: auto;">
			<u-button open-type="share" style="width:240px;" type="success" shape="circle">邀请好友</u-button>
		</view>
		<!-- <view v-if="!show" @click="daka" class="heart">
			<text style="position: absolute; z-index: 1; top: 60%; left: 50%; margin-left: -30px; " class="f16 fb cf">{{ form.word_two }}</text>
			<view class="topLeft"></view>
			<view class="topRight"></view>
			<view class="bottom"></view>
		</view> -->
		<view class="heart" v-if="!show" @click="daka">
			<image src="../../static/home/heart.png" mode=""></image>
			<text class="f16 fb cf">{{ form.word_two }}</text>
		</view>
		<view class="draft" v-if="!show"><image src="../../static/home/draft.png" mode=""></image></view>
		<view v-if="show" class="modal" style="background:url('../../static/home/modal.png');background-size: 100% 100%;">
			<image src="../../static/home/close.png" mode="" class="close" @click="show = false"></image>
			<view class="my">
				<text>我{{ form.word_one }}Ta</text>
				<text class="num">{{ MyCount.my_sign_count }}</text>
				<text class="day">天</text>
			</view>
			<view class="he">
				<text>Ta{{ form.word_one }}我</text>
				<text class="num">{{ MyCount.ta_sign_count }}</text>
				<text class="day">天</text>
			</view>
			<view class="bottom">
				更多挑战还在等你哦
			</view>
			<!-- <view class="flex a-t cf f12" style="margin-bottom: 10px;">
				<image
					:src="form.my_avatar"
					style="width: 30px;border-radius: 50%; border: #fff solid 2px ; box-sizing: border-box; margin-right: 6px;height: 30px; "
					mode=""
				></image>
				<view style="line-height: 30px;">
					我 {{ form.word_one }}了Ta
					<text class="f16 fb">{{ MyCount.my_sign_count }}</text>
					天
				</view>
			</view>
			<view class="flex a-t cf f12" style="margin-bottom: 10px;">
				<image
					:src="form.ta_avatar"
					style="width: 30px;border-radius: 50%; border: #fff solid 2px ; box-sizing: border-box; margin-right: 6px;height: 30px; "
					mode=""
				></image>
				<view style="line-height: 30px;">
					Ta{{ form.word_one }}了我
					<text class="f16 fb">{{ MyCount.ta_sign_count }}</text>
					天
				</view>
			</view> -->
		</view>

		<view class="swiper-wrapper">
			<swiper style="height: 68px;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in modelist" style="height: 68px;">
					<view class="flex j-t">
						<view
							@click="all(items.path)"
							class="f12 flex a-t j-t"
							v-for="(items, inx) in item"
							style="width: 58px; height: 58px; background: #fff; margin: 5px; border-radius: 9px; color: #333; text-align: center; "
						>
							<view>
								<image :src="items.icon_image" style="width:26px;" mode="widthFix"></image>
								<view class="bg">{{ items.name }}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="game-wrapper">
			<view class="item">
				<view class="left">
					真爱合约
					<view class="btn sign" @click="toZahy">立即签约</view>
				</view>
				<view class="right"><image src="../../static/home/flower.png" mode=""></image></view>
			</view>
			<view class="item">
				<view class="left">
					恋爱日记
					<view class="btn participation">立即参与</view>
				</view>
				<view class="right"><image src="../../static/home/money.png" mode=""></image></view>
			</view>
		</view>

		<view
			@click="all('/pages/yingyong/yingyong')"
			class="flex a-t j=t"
			style="position: fixed; z-index: 1;bottom:180px; right: 0;background: rgba(0,0,0,0.5);color: #fff;border-radius: 8px 0 0 8px;padding: 6px 12px;"
		>
			趣味应用
		</view>
		<view
			v-if="form.type == 'temp'"
			@click="tuichu"
			class="flex a-t j=t"
			style="position: fixed; z-index: 1;bottom:140px; right: 0;background: rgba(0,0,0,0.5);color: #fff;border-radius: 8px 0 0 8px;padding: 6px 12px;"
		>
			退出体验空间
		</view>
		<!-- <view @click="tuichu"  class="flex a-t j=t"  style="position: fixed; z-index: 1;top:240px; left: 0;background: rgba(0,0,0,0.5);color: #fff;border-radius: 8px 0 0 8px;padding: 6px 12px;" >
			创建其他空间
		</view> -->
		<view class="flex a-t j=t" style="position: fixed; z-index: 1;bottom:130px; left: 50%;margin-left: -25px;">
			<image
				class="animat"
				v-if="hasGiftTrue"
				@click="lingqu"
				src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/qinglvliwu.png"
				mode="widthFix"
				style="width: 50px;text-align: center;"
			></image>
		</view>
		<tab-bar />
		<u-popup v-model="shows" mode="center">
			<view style="width: 250px;padding: 10px 0;">
				<view class="title" style="line-height: 40px;font-weight: bold;text-align: center;">我的空间({{ kongjianlist.length }}/15)</view>
				<view v-for="(item, index) in kongjianlist" @click="qiehuan(index)" style="text-align: center;line-height: 40px;" class="bg fb">{{ item.space_name }}</view>
				<view style="width: 180px;margin:10px auto;">
					<u-button style="" @click="chuangjianqita = true" type="success" shape="circle">邀请好友开通其他空间</u-button>
					<!-- <u-button  open-type="share" style="" type="success" shape="circle">邀请好友开通其他空间</u-button> -->
				</view>
			</view>
		</u-popup>
		<u-popup v-model="chuangjianqita" mode="center">
			<view style="width:300px;padding: 20px;">
				<view class="flex">
					<view @click="select(item, index)" v-for="(item, index) in datalist" class="w50" style="text-align: center;position: relative;">
						<view style="position: absolute;z-index: 5;top:-10px;left: 0px;">
							<view style="position: absolute;z-index: 1;top:20px;left: -2px;width: 100%;height: 100%;">
								<view style="font-size: 12px;color: #fec5ce;transform:rotate(-30deg);" class="fb">{{ item.name }}</view>
							</view>
							<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/yun.png" mode="widthFix" style="width: 70px;"></image>
						</view>

						<image
							style="width:100%;z-index: 2;"
							:src="
								numss == index
									? 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/kuang1.png'
									: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/kuang.png'
							"
							mode="widthFix"
						></image>
						<image :src="item.cover_image" mode="widthFix" style="width: 50%;position: absolute;z-index: 1;left: 25%;top: 25%;"></image>
					</view>
				</view>
			</view>
			<view style="width: 200px;margin: 10px auto;"><u-button open-type="share" style="" type="success" shape="circle">确定</u-button></view>
		</u-popup>
		<!-- <index></index> -->
	</view>
</template>

<script>
import index from '@/pages/index/index';

import navbar from '@/components/navbar.vue';
export default {
	components: {
		navbar,
		index
	},
	data() {
		return {
			datalist: [],
			chuangjianqita: false,
			kongjianlist: [],
			typelist: [],
			type: '',
			zanheight: 0,
			show: false,
			shows: false,
			num: 0,
			img2: '',
			form: {},
			modelist: [],
			MyCount: {},
			hasGiftTrue: false,
			giftInfo: null,
			url: '',
			my_space_id: '',
			numss: 0,
			my_space_id1: ''
			// userinfo:this.vuex_user
		};
	},
	onLoad(e) {
		if (e.my_space_id) {
			this.my_space_id = e.my_space_id;
		}

		if (e.volume_id) {
			console.log(e.volume_id);
		}

		this.list();
	},

	onShow() {
		// if(this.type=='lianai'){
		// 	this.add()
		// }
		if (this.my_space_id) {
			return this.bind(this.my_space_id, 0);
		}
		this.getmy_space();
		this.hasGift();
	},
	mounted() {
		// this.autoselect()
	},
	onShareAppMessage(res) {
		// this.create('normal', this.datalist[this.numss].id).then(r => {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '来和我一起开通吧',
			path: 'pages/kongjian/kongjian?my_space_id=' + this.my_space_id1
		};
		// });
	},
	methods: {
		toZahy() {
			uni.navigateTo({
				url: '/pages/loveContract/index'
			})
		},
		select(ietm, index) {
			this.numss = index;
			this.create('normal', this.datalist[this.numss].id).then(r => {
				this.my_space_id1 = r;
			});
		},
		create(e, id) {
			return new Promise((r, n) => {
				let data = {
					space_id: id,
					sex: uni.getStorageSync('sex'),
					type: e
				};
				this.$u.api.create(data).then(res => {
					if (e == 'temp') {
						uni.switchTab({
							url: '/pages/content/content'
						});
					} else {
						r(res.id);
					}
				});
			});
		},
		async list() {
			let res = await this.$u.api.setspaceurl();
			this.datalist = res;
			uni.setStorageSync('list', JSON.stringify(res));
		},
		// 退出体验空间
		tuichu() {
			let self = this;
			self.$u.api.deleteTempSpace({}).then(res => {
				uni.redirectTo({
					url: '/pages/index/index?type=tuichu'
				});
			});
		},
		qiehuan(e) {
			this.form = this.kongjianlist[e];
			this.shows = false;
			this.allapi();
			this.$u.vuex('vuex_user_content', this.form);
		},
		navheight(e) {
			this.zanheight = e;
		},
		all(e) {
			let self = this;

			// 纪念日
			if (e == '/pages/jinianri/jinianri') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_anniversaries.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_anniversaries.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_anniversaries.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_anniversaries.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 闹钟
			if (e == '/pages/naozhong/naozhong') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_alarm_clock.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_alarm_clock.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_alarm_clock.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_alarm_clock.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 姨妈助手
			if (e == '/pages/yima/yima') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_assistant.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_assistant.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_assistant.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_assistant.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 日记
			if (e == '/pages/riji/riji') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_diary.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_diary.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_diary.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_diary.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 位置
			if (e == '/pages/weizhi/weizhi') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_location.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_location.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_location.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_location.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 100件小事
			if (e == '/pages/yibai/yibai') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_small_things.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_small_things.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_small_things.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_small_things.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 三生石
			if (e == '/pages/sanshengshi/sanshengshi') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_stone.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_stone.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_stone.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_stone.byte],
						success(res) {}
					});
				}
				// #endif
			}

			// 礼物中心
			if (e == '/pages/liwu/liwu') {
				// #ifdef MP
				if (self.vuex_site_config.sub_msg_gift.wechat) {
					uni.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_gift.wechat],
						success(res) {}
					});
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (self.vuex_site_config.sub_msg_gift.byte) {
					tt.requestSubscribeMessage({
						tmplIds: [self.vuex_site_config.sub_msg_gift.byte],
						success(res) {}
					});
				}
				// #endif
			}

			uni.navigateTo({
				url: e
			});
		},
		async getmy_space() {
			let res = await this.$u.api.my_space();
			if (res.length == 0) {
				return uni.redirectTo({
					url: '/pages/index/index'
				});
			} else {
				this.kongjianlist = res;
				this.form = res[0];
				this.$u.vuex('vuex_user_content', this.form);
				this.gettype(res);
				this.allapi();
			}
		},
		allapi() {
			this.img2 = this.form.background_image;
			this.modular(this.form.space_id);
			this.sign(this.form.id);
		},
		gettype(data) {
			let typelist = JSON.parse(uni.getStorageSync('list'));
			for (let i in typelist) {
				for (let t in data) {
					if (typelist[i].id == data[t].space_id) {
						this.typelist.push(typelist[i]);
					}
				}
			}
		},
		// 获取二维码
		qrcode() {
			let data = {
				platform: 'byte',
				path: 'pages/index/index?my_space_id=' + this.vuex_user_content.id
			};
		},
		// base64 格式
		getBase64(file) {
			return new Promise(function(resolve, reject) {
				let reader = new FileReader();
				let imgResult = '';
				reader.readAsDataURL(file);
				reader.onload = function() {
					imgResult = reader.result;
				};
				reader.onerror = function(error) {
					reject(error);
				};
				reader.onloadend = function() {
					resolve(imgResult);
				};
			});
		},

		blobToDataURL(blob, callback) {
			let a = new FileReader();
			a.onload = function(e) {
				callback(e.target.result);
			};
			a.readAsDataURL(blob);
		},
		getObjectURL(file) {
			let url = null;
			if (window.createObjectURL != undefined) {
				// basic
				url = window.createObjectURL(file);
			} else if (window.webkitURL != undefined) {
				// webkit or chrome
				try {
					url = window.webkitURL.createObjectURL(file);
				} catch (error) {}
			} else if (window.URL != undefined) {
				// mozilla(firefox)
				try {
					url = window.URL.createObjectURL(file);
				} catch (error) {}
			}
			return url;
		},
		yaoqing() {
			this.qrcode();
		},
		// 查看今日是否签到
		async sign(my_space_id) {
			let data = {
				my_space_id: my_space_id
			};
			let res = await this.$u.api.sign(data);
			if (!res && res == null) {
				this.show = false;
			} else {
				this.show = true;
			}
			this.count();
		},
		// 开始打卡
		async daka() {
			let self = this;

			// #ifdef MP
			if (self.vuex_site_config.sub_msg_miss_you.wechat) {
				uni.requestSubscribeMessage({
					tmplIds: [self.vuex_site_config.sub_msg_miss_you.wechat],
					success(res) {}
				});
			}
			// #endif

			// #ifdef MP-TOUTIAO
			if (self.vuex_site_config.sub_msg_miss_you.byte) {
				uni.requestSubscribeMessage({
					tmplIds: [self.vuex_site_config.sub_msg_miss_you.byte],
					success(res) {}
				});
			}
			// #endif

			let data = {
				my_space_id: this.form.id,
				date: this.date.getdate(),
				user_id: this.vuex_user.user_id
			};
			let res = await this.$u.api.ksidaka(data);
			this.show = false;
			this.sign(this.form.id);
			this.count();
		},
		async count() {
			let data = {
				my_space_id: this.form.id
			};
			let res = await this.$u.api.count(data);
			this.MyCount = res;
			this.$u.vuex('vuex_MyCount', res);
		},
		//绑定空间
		async bind(id, sex) {
			// let id=uni.getStorageSync('my_space_id')
			let data = {
				my_space_id: id,
				sex: sex
			};
			let res = await this.$u.api.bind_my_space(data);
			// uni.showToast({
			// 	title:res.code
			// })
			// bind_my_space
		},
		//获取各空间板块
		async modular(space_id) {
			let data = {
				space_id: space_id
			};
			let res = await this.$u.api.modular(data);
			function chunk(arr, size) {
				var result = [];
				for (var i = 0, len = arr.length; i < len; i += size) {
					result.push(arr.slice(i, i + size));
				}
				// newarr.push(result)
				return result;
			}
			this.modelist = chunk(res, 5);
		},
		// 未领取礼物
		async hasGift() {
			let res = await this.$u.api.hasGift();
			if (res) {
				this.hasGiftTrue = true;
				this.giftInfo = res;
			} else {
				this.hasGiftTrue = false;
			}
		},
		// 领取礼物
		async receivegift() {
			let self = this;
			await this.$u.api.receivegift({
				gift_exchange_id: self.giftInfo.id,
				my_space_id: this.kongjianlist[0].id
			});
			uni.showToast({
				title: '领取成功',
				icon: 'none'
			});
			setTimeout(() => {
				this.hasGift();
			}, 1500);
		},
		// 点击领取
		lingqu() {
			this.receivegift();
		}
	}
};
</script>
<style scoped lang="scss">
.header-wrapper {
	display: flex;
	justify-content: space-between;
	width: 95%;
	margin: 0 auto;
	.header-content {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		.left {
			text-align: center;
			font-weight: 600;
			font-size: 30rpx;
			text {
				color: red;
			}
			.btn {
				margin-top: 10rpx;
				background: #ed6da4;
				color: #fff;
				border-radius: 40rpx;
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
		.right {
			margin-left: 20rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}
		}
	}
	.header-share {
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
.draft {
	width: 261rpx;
	height: 155rpx;
	margin: 20rpx auto;
	image {
		width: 100%;
		height: 100%;
	}
}
.swiper-wrapper {
	width: 95%;
	background: #fff;
	margin: 0 auto;
	box-shadow: 0 0 20rpx #dedede;
	border-radius: 30rpx;
	.bg {
		color: #000;
	}
}

.game-wrapper {
	width: 95%;
	margin: 20rpx auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	.item {
		width: 49%;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
		box-shadow: 0 0 20rpx #dedede;
		border-radius: 30rpx;
		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-right: 20rpx;
			color: #000;
			font-size: 26rpx;
			.btn {
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				color: #fff;
			}
			.btn.sign {
				background: #ed6da4;
			}
			.btn.participation {
				background: #2bcbd9;
			}
		}
		image {
			width: 102rpx;
			height: 120rpx;
		}
	}
}
.modal {
	width: 80%;
	height: 600rpx;
	margin: 100rpx auto;
	position: relative;
	.close {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		right: -40rpx;
		top: -60rpx;
	}
	.my, .he {
		position: absolute;
		top: 130rpx;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text.num {
			color: red;
			text-align: center;
		}
	}
	.my {
		left: 30%;
		.day {
			text-align: right;
		}
	}
	.he {
		right: 30%;
		.day {
			text-align: left;
		}
	}
	.bottom {
		font-size: 26rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
<style>
page {
	/* background: #fec5ce; */
	background-image: linear-gradient(to right, #87ceeb, rgb(255, 192, 203));
	height: 100%;
}

.heart {
	margin: 60px auto 0;
	width: 200px;
	height: 200px;
	/* border: 1px solid #0094ff; */
	position: relative;
	animation-name: shake;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.heart image {
	width: 100%;
	height: 100%;
}
.heart text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.heart view {
	/* border: 1px solid #0094ff; */
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgb(241, 158, 194);
	animation-name: shadow;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}

.topLeft,
.topRight {
	border-radius: 100px 100px 0 0;
}

.topLeft {
	transform: translate(-50px, 0) rotate(-45deg);
}

.topRight {
	transform: translate(50px, 0) rotate(45deg);
}

.bottom {
	transform: translate(0, 64px) rotate(45deg) scale(0.8, 0.8);
}
/* 定义动画 */

@keyframes shake {
	from {
		transform: scale(0.9, 0.9);
	}
	to {
		transform: scale(1.1, 1.1);
	}
}

@keyframes shadow {
	from {
	}
	to {
		box-shadow: 0px 0px 50px rgb(241, 158, 194);
	}
}
</style>
